<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <title>Document</title>
</head>
<style>
    h1 {
      margin: 20px;
      text-align: center;
    }
    h4 {
      margin: 20px 0;
    }
    .card {
      margin-bottom: 10px;
    }
    .form-control{
        width: 100%;
        height: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>采购小助手</h1>
    <form>
      <div class="form-group">
        <label for="name">物资名：</label><br/>
        <input type="text" class="form-control" id="name" />
      </div>
      <div class="form-group">
        <label for="price">单价：</label><br/>
        <input type="number" class="form-control" id="price"/>
      </div>
      <div class="form-group">
        <label for="amount">数量：</label><br/>
        <input type="number" class="form-control" id="amount" />
      </div>
      <button type="submit" class="btn btn-primary" id="submit" style="margin-top: 10px;">记账</button>
    </form>
    <h4>历史采购</h4>
    <div class="history-list" id="history-list">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">2021年3月10日</h5>
          <p class="card-text">物资：苹果，单价：10元，数量：100个</p>
          <p class="card-text">共计1000元</p>
        </div>
      </div>
    </div>
  </div>
</body>
    <script type="text/javascript" >
        $("#submit").click(function(e){
            e.preventDefault();
            var today=new Date();
            var name=$("#name").val();
            var price=$("#price").val();
            var amount=$("#amount").val();
            var str=`<div class="card">
                        <div class="card-body">
                            <h5 class="card-title">
                            ${today.getFullYear()}年${
                                today.getMonth()+1
                            }月${today.getDate()}日
                            </h5>
            <p class="card-text">物资:${name},单价:${price}元, 数量：${amount}</p>
            <p class="card-text">共计： ${price*amount}元</p>
                            <div/>
                        <div/>`;
            $("#history-list").prepend($(str));
            $("form")[0].reset();
        })
    </script>
</html>